<!--
 * @Descripttion: 
 * @version: 1.0.0
 * @Author: guoxiaomin
 * @Email: 1093556028@qq.com
 * @Date: 2019-09-11 12:22:34
 * @LastEditors: guoxiaomin
 * @LastEditTime: 2019-09-12 14:51:44
 -->
<style lang="less" scoped>
.aboutBox{
  .wrap{
    width: 100%;
    background: url('../../assets/wap/aboutbg@2x.png') no-repeat;
    background-size: 100% 100%;
    padding-bottom: 0.69rem;
    .ct{
      padding: 0.67rem 0 0 0.46rem;
      .line{
        width:0.52rem;
        height:0.08rem;
        background:rgba(253,55,26,1);
      }
      .p1{
        font-size:0.8rem;
        font-weight:bold;
        color: #ffffff;
        padding-top: 0.51rem;
      }
      .p2{
        padding-top: 0.5rem;
      }
      .p2, .p3, .p4{
        font-size: 0.3rem;
        color: #ffffff;
        line-height: 0.6rem;
      }
      .phoneBox{
        padding-top: 1.27rem;
        .phone{
          display: inline-block;
          width:2.03rem;
          height:0.58rem;
          background:rgba(253,55,26,1);
          border:1px solid rgba(253,55,26,1);
          line-height: 0.58rem;
          text-align: center;
          color: #FFFFFF;
          font-size: 0.24rem;
        }
        .txt{
          font-size: 0.24rem;
          color: #ffffff;
          padding-top: 0.16rem;
        }
      }
      .contactform{
        width: 6.72rem;
        height:4.02rem;
        background: rgba(255, 255, 255, 0.9);
        border-radius: 0.1rem;
        box-sizing: border-box;
        position: relative;
        overflow: hidden;
        margin-top: 0.75rem;
        .inputBox{
          padding: 0.46rem 0.4rem 0 0.4rem;
          display: flex;
           .lineInput{
            background: #ffffff;
            border-radius: 0.1rem;
            display: flex;
            align-items: center;
            padding-left: 0.25rem;
            box-sizing: border-box;
            height: 0.8rem;
            .icon{
              width: 0.28rem;
              height: 0.28rem;
            }
            .nameIcon{
              width: 0.24rem;
            }
          }
          .phoneInput{
            margin-left: 0.33rem;
          }
        }
        .getIntro{
          padding-top: 0.31rem;
          text-align: center;
          color: #999999;
          font-size: 0.22rem;
        }
        .getBtn{
          width:4rem;
          height:0.8rem;
          background:rgba(253,55,26,1);
          border-radius:0.03rem;
          font-size: 0.24rem;
          color: #ffffff;
          text-align: center;
          line-height: 0.8rem;
          margin-top: 0.38rem;
          cursor: pointer;
          position: relative;
          left: 50%;
          transform: translateX(-50%);
        }
        .scroll{
          height: 0.6rem;
          overflow: hidden;
          background:rgba(255,204,204,0.6);
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
        }
      }
    }
  }
}
</style>
<template>
<div class="aboutBox">
  <transition name="bounce">
    <NavDraw @close='closeClicked' @linked='linkedClicked' v-if="isOpenedNavDraw"></NavDraw>
  </transition>
  <div class="wrap">
    <HeaderNav  @openNav='openNavClicked'></HeaderNav>
    <div class="ct">
      <div class="line"></div>
      <p class="p1">合作共赢</p>
      <p class="p2">如果您有闲置资金，通过哪些理财渠道</p>
      <p class="p3">可以获得高收益？如何进行风控？</p>
      <p class="p4">别担心，鼎晟恒基帮您解答！</p>
      <div class="phoneBox">
        <a class="phone" href="tel:010-87506918">
          联系我们
        </a>
        <p class="txt">欢迎来电咨询，鼎晟恒基期待与您的合作！</p>
      </div>
      <div class="contactform">
        <div class="inputBox">
          <div class='nameInput lineInput'>
            <img src="../../assets/web/iconWd@2x.png" alt="" class="icon nameIcon">
            <input-verify
              class='realInput'
              type="text"
              autocomplete="off"
              ref="nameInput"
              labelFor="nameInput"
              placeholder="请输入姓名"
              :rules='name'
              :doNotShowSuccess='true'
              @blur='handBlur'
              @change="handleNameChange"
            />
          </div>
          <div class='phoneInput lineInput'>
            <img src="../../assets/web/iconDh@2x.png" alt="" class="icon phoneIcon">
            <input-verify
              class='realInput'
              type="tel"
              autocomplete="off"
              ref="phoneInput"
              labelFor="phoneInput"
              placeholder="请输入手机号"
              :rules='phone'
              :doNotShowSuccess='true'
              @blur='handBlur'
              @change="handlePhoneChange"
            />
          </div>
        </div>
        <p class="getIntro" v-if="isGet">您已申请成功，我们将尽快联系您!</p>
        <div class="getBtn" @click="askForMoneyClicked">极速申请</div>
        <div class="scroll">
          <UserWrap></UserWrap>
        </div>
      </div>
    </div>
  </div>
</div>
</template>
<script>
import InputVerify from '../../components/InputVerify'
import Mixmin from './mixin/same'
import Toast from '../../common/toast'
import UserWrap  from '../../components/userWrap'
export default {
  components: {
    InputVerify,
    UserWrap
  },
  mixins: [Mixmin],
  data() {
    return {
      userName: '',
      userPhone: '',
      isGet: false,
      phone: [
        { required: true, msg: '手机号不能为空' },
        {
          msg: '手机号格式不正确',
          partern: /^1((3\d)|(4(5|7))|([5-9]\d))\d{8}$/
        }
      ],
      name: [
        { required: true, msg: '姓名不能为空' }
      ]
    }
  },
  methods: {
    handlePhoneChange (e) {
      this.userPhone = e
    },
    handleNameChange (e) {
      this.userName = e
    },
    handBlur() {
      window.scrollTo(0,0)
    },
    // 申请贷款
    askForMoneyClicked() {
      const situation1st = this.$refs.phoneInput._validate()
      const situation2st = this.$refs.nameInput._validate()
      if (!situation1st || !situation2st) {
        return
      }
      this.$service.post('http://api.dingwealth.com/users/add',{
        userName: this.userName,
        phone: this.userPhone
      }).then(() => {
        this.isGet = true
        Toast({
          text: '申请成功，稍后会有工作人员联系您！'
        })
      })
    }
  }
}
</script>